import { useState } from 'react';
import an58 from '@mmstudio/an000058';
import { Form, Input } from 'antd';
import AddButton from '../../../components/addbutton';
import api from '../../../atoms/api';
import { Message as M1, Result as R1 } from '../../api/admin/menu/add.api';

export default function Add({
	pid,
	pname,
	onSave
}: {
	pid: string | null;
	pname: string | null;
	onSave(menu: ITbfdmenu): void;
}) {
	const [data, setdata] = useState({} as M1);
	return <>
		<AddButton dlgtitle='新增菜单项' onSave={async () => {
			if (!data
				|| !data.name
			) {
				return '菜单名称不能为空';
			}
			const res = await an58<R1, M1>(api['/api/admin/menu/add'], 'post', {
				...data,
				pid
			});
			if (res.ok === true) {
				onSave({
					menuid: res.id,
					name: data.name
				} as ITbfdmenu);
				return null;
			}
			return res.message;
		}} >
			<Form.Item label='父菜单'>
				<span>{pname || '根目录'}</span>
			</Form.Item>
			<Form.Item required label="菜单名称:">
				<Input placeholder='菜单名称' value={data.name} onChange={(e) => {
					setdata((origin) => {
						return {
							...origin,
							name: e.target.value
						};
					});
				}} />
			</Form.Item>
		</AddButton>
		<style jsx>{`
.icon{
	width: 2rem;
}
`}</style>
	</>;
}
